<template>
  <a-card>
    <a-spin :spinning="spinning" size="large">
      <a-form-model ref="rulesForm" :model="form" :rules="rules" :labelCol="{ lg: { span: 5 }, sm: { span: 7 } }" :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }">
        <a-form-model-item label="搭配名称" prop="name">
          <a-input v-model="form.name" placeholder="请输入" />
        </a-form-model-item>
        <a-form-model-item label="搭配师" prop="fashionerId">
          <a-select v-model="form.fashionerId" show-search :filter-option="filterOption">
            <a-select-option :value="item.code" v-for="item in fashionerList" :key="item.code">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <!-- <a-form-model-item label="年份季节" style="margin-bottom: 0;"  required>
          <a-form-model-item label="" style="display: inline-block;vertical-align: top;width: 50%" prop="year">
            <a-date-picker
              mode="year"
              style="width:100%;"
              placeholder="请选择年份"
              format='YYYY'
              v-model="form.year"
              :open='yearShowOne'
              @change="handChange"
              @openChange="openChangeOne"
              @panelChange="panelChangeOne"/>
          </a-form-model-item>
          <a-form-model-item label="" style="display: inline-block;vertical-align: top;width: calc(50% - 5px);margin-left: 5px;" prop="season">
            <a-select
              mode="multiple"
              placeholder="请选择"
              v-model="form.season"
            >
              <a-select-option value="春">春</a-select-option>
              <a-select-option value="夏">夏</a-select-option>
              <a-select-option value="秋">秋</a-select-option>
              <a-select-option value="冬">冬</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-form-model-item> -->

        <!-- <a-form-model-item label="波段" style="margin-bottom: 0;"  required>
          <a-form-model-item label="" style="display: inline-block;vertical-align: top;width: 50%" prop="month">
              <a-select v-model="form.month" placeholder="请选择" show-search :filter-option="filterOption" >
                <a-select-option :value="item" v-for="(item, index) in bandList" :key="index">
                  {{ item }}月
                </a-select-option>
              </a-select>
          </a-form-model-item>
          <a-form-model-item label="" style="display: inline-block;vertical-align: top;width: calc(50% - 5px);margin-left: 5px;" prop="matchBand">
            <a-select v-model="form.matchBand" placeholder="请选择" show-search :filter-option="filterOption" >
              <a-select-option value="A">A</a-select-option>
              <a-select-option value="B">B</a-select-option>
              <a-select-option value="C">C</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-form-model-item> -->

        <a-form-model-item label="适用性别" prop="lookGender">
          <a-checkbox-group :options="genderList" v-model="form.lookGender" />
        </a-form-model-item>
        <a-form-model-item label=" 主品牌" prop="brandId">
          <a-select v-model="form.brandId">
            <a-select-option :value="item.code" v-for="item in brandList" :key="item.code">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="搭配介绍">
          <a-textarea v-model="form.matchAbout" placeholder="请输入" :rows="4" />
        </a-form-model-item>
        <template v-for="(tag, tagIndex) in tags">
          <a-form-model-item style="margin-bottom: 0;" :label="tag.name" :key="tagIndex">
            <template v-for="t in tag.tags">
              <a-checkable-tag :key="t.id" :checked="form.labelList.indexOf(t.id) > -1" @change="checked => handleTagChange(t.id, checked)">
                {{ t.name }}
              </a-checkable-tag>
            </template>
          </a-form-model-item>
        </template>
        <a-divider />

        <a-form-model-item :wrapperCol="{ span: 24 }" style="text-align: center">
          <a-button htmlType="submit" type="primary" @click="handleSubmit">下一步</a-button>
          <a-button style="margin-left: 8px" @click="handleBack">取消</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-card>
</template>
<script>
import { addCondition, matchCreate } from '@api/box/boxLook'
import moment from 'moment'
let bandList = []
for (let j = 1; j < 13; j++) {
  bandList.push(j)
}
export default {
  data() {
    return {
      spinning: false,
      brandList: [],
      fashionerList: [],
      genderList: [],
      bandList,
      tags: [],
      form: {
        labelList: [],
        year: undefined
      },
      rules: {
        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        fashionerId: [{ required: true, message: '请选择', trigger: 'change' }],
        /* year: [
            { required: false, message: '请选择', trigger: ['change', 'blur']}
          ],
          season: [{ required: true, message: '请选择', trigger: 'blur' }],
          month: [
            { required: true, message: '请选择', trigger: 'change' }
          ],
          matchBand:  [
            { required: true, message: '请选择', trigger: 'change' }
          ], */
        lookGender: [{ required: true, message: '请选择', trigger: 'change' }],
        brandId: [{ required: true, message: '请选择', trigger: 'change' }]
      },
      yearShowOne: false
    }
  },
  computed: {},
  watch: {
    $route(to, from) {
      if (from.path.includes('/box/boxLook/addAndEdit2') || to.path.includes('/box/boxLook/addAndEdit2')) {
      } else {
        this.form = {
          name: '',
          fashionerId: '',
          // year: undefined,
          month: '',
          matchBand: '',
          brandId: '',
          lookGender: [],
          labelList: [],
          // season: [],
          matchAbout: ''
        }
      }
    }
  },
  activated() {
    this.$refs.rulesForm.clearValidate()
    this.getDetails()
  },
  created() {},
  mounted() {},
  methods: {
    handleTagChange(tag, checked) {
      console.log(checked, tag)
      const { labelList } = this.form
      const nextSelectedTags = checked ? [...labelList, tag] : labelList.filter(t => t !== tag)
      this.form.labelList = nextSelectedTags
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    handChange() {
      this.form.year = undefined
    },
    // 弹出日历和关闭日历的回调
    openChangeOne(status) {
      this.yearShowOne = status
    },
    // 得到年份选择器的值
    panelChangeOne(value) {
      this.form.year = moment(value).format('YYYY')
      this.yearShowOne = false
    },

    handleSubmit() {
      this.$refs.rulesForm.validate(valid => {
        if (valid) {
          /* if (!this.form.year) {
              this.$message.error('请选择年份！')
              return
            } */
          console.log(this.form, 'this.form....')
          const match = JSON.stringify(this.form)
          console.log(match)
          this.$router.push(`/box/boxLook/addAndEdit2?match=${match}`)
        } else {
          // this.$router.push(`/box/boxLook/addAndEdit2`)
          console.log('error submit!!')
          return false
        }
      })
    },
    handleBack() {
      this.$router.go(-1)
    },
    getCondition() {
      this.spinning = true
      addCondition()
        .then(res => {
          this.spinning = false
          if (res.code === 0) {
            const { arcBrand, fashioner, matchGender, tags } = res.data
            this.brandList = arcBrand
            this.fashionerList = fashioner
            this.tags = tags
            this.genderList = matchGender.map(e => {
              return {
                label: e.name,
                value: e.code,
                default: e.default
              }
            })
          } else {
            this.$message.error(res.data.msg)
          }
        })
        .catch(err => {
          this.spinning = false
        })
    },
    getDetails() {
      const id = this.$route.params.id
      this.spinning = true
      const data = {
        id: id == 'null' ? '' : id
      }
      addCondition(data)
        .then(res => {
          this.spinning = false
          if (res.code === 0) {
            const { fashionerMatch, labelIds, lookLabelList, productList, arcBrand, fashioner, matchGender, tags, look } = res.data
            // 全部条件列表
            this.brandList = arcBrand
            this.fashionerList = fashioner
            this.tags = tags
            this.genderList = matchGender.map(e => {
              return {
                label: e.name,
                value: e.code,
                default: e.default
              }
            })
            if (id == 'null') return
            // 回显信息
            const { brandId, year, season, lookGender } = fashionerMatch
            console.log(labelIds, lookLabelList, productList, fashionerMatch)
            this.form = {
              ...fashionerMatch,
              brandId: brandId + '',
              // year: year + '',
              lookGender: lookGender ? lookGender.split(',') : [],
              labelList: labelIds ? labelIds.map(e => Number(e)) : [],
              // season: season ? season.split(',') : [],
              lookLabelList: lookLabelList ? lookLabelList : [],
              productList: productList ? productList : [],
              source: look.source
            }
            console.log(this.form, 'this.formxx')
          } else {
            this.$message.error(res.data.msg)
          }
        })
        .catch(err => {
          this.spinning = false
        })
    }
  }
}
</script>
<style scoped>
/deep/.ant-tag {
  cursor: pointer;
}
.icon-img {
  width: 86px;
  height: 86px;
  object-fit: scale-down;
}
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
/* you can make up upload button and sample style by using stylesheets */
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>

